<template>
	<view class="content">
		<view class="nav">
			<view v-for="(item, index) in navList" class="nav-item" @tap="change(item.desc)">{{ item.title }}</view>
		</view>
		
		<view class="con">
			<view v-for="(item,index) in conList" class="con-item" @click="gotoDetail(item.id)">
					<image class="image" :src="item.author.avatar_url" ></image>
					<view class="">
						{{item.title}}
					</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [{ title: '全部', desc: 'all' }, { title: '精华', desc: 'good' }, { title: '问答', desc: 'ask' }, { title: '分享', desc: 'share' },{ title: '招聘', desc: 'job' }],
			conList:[],
			params:{
				page:1,
				limit:10,
				tab:"all"
			}
		};
	},
	onLoad() {},

	methods: {
		getdata(){
			// uni.request({
			// 	url:"https://cnodejs.org/api/v1/topics",
			// 	data:{tab:desc},
			// 	success(res){
			// 		console.log(res);
					
			// 	}
			// })
			//uniapp的request方法 支持promise的写法 也就是可以写成.then 如果是then的话返回的是一个数组
			uni.request({
				url:"https://cnodejs.org/api/v1/topics",
				data:this.params
				
			}).then(res=>{
				let [fail,data]=res
				console.log(data);
				if(data.data.data.length<this.params.limit){
					uni.showToast({
						title:"已经到底了"
					})
					return false
				}
				this.conList=[...this.conList,...data.data.data]
				
			})
		},
		//请求数据的方法
		
		change(desc){
			
			this.params.tab=desc

			this.getdata()

		},
		//点击切换数据
		gotoDetail(id){
			uni.navigateTo({
				// url:"./pages-other/detail/detail?id="+id
			})
			
		},
		
	},
	onReachBottom(){
		this.params.page++
		this.getdata()
		
	},
	//上拉加载更多
	onPullDownRefresh() {
			this.params.page=1;
			this.conList=[];
			this.getdata()
	}
	// 下拉刷新
};
</script>

<style lang="scss">
.nav {
	width: 100%;
	display: flex;
	.nav-item {
		flex: 1;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}
}
.con{
	.con-item{
		display: flex;
		.image{
			width: 200rpx!important;
			height: 200rpx!important;
		}
		
	}
}
</style>
